<template>
  <div class="edp-home">
    <el-row :gutter="10">
      <el-col :span="6">
        <el-card class="edp-home-card" shadow="hover">
          <div slot="header" class="clearfix">
            <div class="edp-home-card-header-title">
              <span>访问量</span>
            </div>
            <div class="edp-home-card-header-right">
              <el-tag>日</el-tag>
            </div>
          </div>
          <div class="edp-home-card-body">
            <span>25,848</span>
            <div class="edp-home-card-body-txt">
              <span style="display: inline-block;margin-right: 16px; line-height: 1.5; ">
                日同比
                <div style="display: inline-block;">
                  <span style="vertical-align: middle;">12.5%
                    <svg class="icon-svg" aria-hidden="true" style="color: #ed4014;">
                      <use xlink:href="#icon-up"></use>
                    </svg>
                  </span>
                </div>
              </span>
              <span style="display: inline-block;line-height: 1.5; color: #515a6e;">
                周同比
                <div style="display: inline-block;">
                  <span style="vertical-align: middle;">-5%
                    <svg class="icon-svg" aria-hidden="true" style="color: #19be6b;">
                      <use xlink:href="#icon-down"></use>
                    </svg>
                  </span>
                </div>
              </span>
            </div>
            <el-divider></el-divider>
            <div class="edp-home-card-bottom">
              <el-row>
                <el-col :span="12">
                  <div>总访问量</div>
                </el-col>
                <el-col :span="12">
                  <div style="text-align: right;">280 万</div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="edp-home-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span class="edp-home-card-header-title">销售额</span>
            <el-tag class="edp-home-card-header-right" type="success">月</el-tag>
          </div>
          <div class="edp-home-card-body">
            <span>¥12,000</span>
            <div class="edp-home-card-body-txt">
              <el-progress :percentage="50" :text-inside="true" :show-text="false" :stroke-width="10"></el-progress>
            </div>
            <el-divider></el-divider>
            <div class="edp-home-card-bottom">
              <el-row>
                <el-col :span="12">
                  <div>总销售额</div>
                </el-col>
                <el-col :span="12">
                  <div style="text-align: right;">68 万</div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="edp-home-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span class="edp-home-card-header-title"> 订单量</span>
            <el-tag class="edp-home-card-header-right" type="warning">周</el-tag>
          </div>
          <div class="edp-home-card-body">
            <span>1,680</span>
            <div class="edp-home-card-body-txt">
              <el-progress :percentage="90" :text-inside="true" :show-text="false" :stroke-width="10" status="success">
              </el-progress>
            </div>
            <el-divider></el-divider>
            <div class="edp-home-card-bottom">
              <el-row>
                <el-col :span="12">
                  <div>转化率</div>
                </el-col>
                <el-col :span="12">
                  <div style="text-align: right;">60%</div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="edp-home-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span class="edp-home-card-header-title">新用户</span>
            <el-tag class="edp-home-card-header-right" type="danger">月</el-tag>
          </div>
          <div class="edp-home-card-body">
            <span>234</span>
            <div class="edp-home-card-body-txt"> <span
                style="display: inline-block;margin-right: 16px; line-height: 1.5; ">
                日同比
                <div style="display: inline-block;">
                  <span style="vertical-align: middle;">12.5%
                    <svg class="icon-svg" aria-hidden="true" style="color: #ed4014;">
                      <use xlink:href="#icon-up"></use>
                    </svg>
                  </span>
                </div>
              </span>
              <span style="display: inline-block;line-height: 1.5; color: #515a6e;">
                周同比
                <div style="display: inline-block;">
                  <span style="vertical-align: middle;">5%
                    <svg class="icon-svg" aria-hidden="true" style="color: #19be6b;">
                      <use xlink:href="#icon-down"></use>
                    </svg>
                  </span>
                </div>
              </span>
            </div>

            <el-divider></el-divider>
            <div class="edp-home-card-bottom">
              <el-row>
                <el-col :span="12">
                  <div>总用户</div>
                </el-col>
                <el-col :span="12">
                  <div style="text-align: right;">235656人</div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="padding-top: 8px">
      <el-col :span="3">
        <el-card shadow="hover">
          <div class="edp-home-module">
            <div class="edp-home-module-ico">
              <svg class="icon-svg" aria-hidden="true">
                <use xlink:href="#icon-team"></use>
              </svg>
            </div>
            <div class="edp-home-module-name">
              用户
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card shadow="hover">
          <div class="edp-home-module">
            <div class="edp-home-module-ico" style="color: rgb(149, 222, 100);">
              <svg class="icon-svg" aria-hidden="true">
                <use xlink:href="#icon-barchart"></use>
              </svg>
            </div>
            <div class="edp-home-module-name">
              分析
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card shadow="hover">
          <div class="edp-home-module">
            <div class="edp-home-module-ico" style="color: rgb(255, 156, 110);">
              <svg class="icon-svg" aria-hidden="true">
                <use xlink:href="#icon-alert"></use>
              </svg>
            </div>
            <div class="edp-home-module-name">
              标签
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card shadow="hover">
          <div class="edp-home-module">
            <div class="edp-home-module-ico" style="color: rgb(179, 127, 235);">
              <svg class="icon-svg" aria-hidden="true">
                <use xlink:href="#icon-shop"></use>
              </svg>
            </div>
            <div class="edp-home-module-name">
              商品
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card shadow="hover">
          <div class="edp-home-module">
            <div class="edp-home-module-ico" style="color: rgb(255, 214, 102);">
              <svg class="icon-svg" aria-hidden="true">
                <use xlink:href="#icon-detail"></use>
              </svg>
            </div>
            <div class="edp-home-module-name">
              订单
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card shadow="hover">
          <div class="edp-home-module">
            <div class="edp-home-module-ico" style="color: rgb(92, 219, 211);">
              <svg class="icon-svg" aria-hidden="true">
                <use xlink:href="#icon-wallet"></use>
              </svg>
            </div>
            <div class="edp-home-module-name">
              票据
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card shadow="hover">
          <div class="edp-home-module">
            <div class="edp-home-module-ico" style="color: rgb(255, 133, 192);">
              <svg class="icon-svg" aria-hidden="true">
                <use xlink:href="#icon-notification-fill"></use>
              </svg>
            </div>
            <div class="edp-home-module-name">
              消息
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card shadow="hover">
          <div class="edp-home-module">
            <div class="edp-home-module-ico" style="color: rgb(255, 192, 105);">
              <svg class="icon-svg" aria-hidden="true">
                <use xlink:href="#icon-pic-right"></use>
              </svg>
            </div>
            <div class="edp-home-module-name">
              配置
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="padding-top: 8px">
      <el-col :span="16">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <div class="edp-home-card-header-title">
              <span>待办事项</span>
            </div>

            <!-- <div class="edp-home-card-header-right">
              <el-tag>日</el-tag>
            </div> -->
          </div>
          <todo ref="todo"></todo>

        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <div class="edp-home-card-header-title">
              <span>日历</span>
            </div>

            <!-- <div class="edp-home-card-header-right">
              <el-tag>日</el-tag>
            </div> -->
          </div>
          <el-calendar>
          </el-calendar>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<style lang="scss" scoped>
.edp-home {
  &-card {
    &-header {
      &-title {
        font-size: 16px;
        float: left;
        color: #515a6e;
      }
      &-right {
        float: right;
      }
    }
    &-body {
      color: #515a6e;
      > span {
        font-size: 30px;
      }
      &-txt {
        height: 30px;
        padding-top: 8px;
      }
    }
    &-bottom {
      width: autopx;
      height: auto;
    }
  }
  &-module {
    color: #515a6e;
    &-ico {
      text-align: center;
      font-size: 32px;
      color: rgb(105, 192, 255);
    }
    &-name {
      text-align: center;
      padding-top: 20px;
    }
  }
}
</style>
<script>
import todo from './home-todo'
export default {
  data () {
    return {

    }
  },
  components: { todo },
  methods: {

  }
}
</script>
